<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    {% include 'component/static_resource_css.html' %}
    <style>
        .main .container {
            width: 720px;
        }

        .text-info {
            color: #ff6a46 !important;
        }

        .btn-info {
            color: #fff;
            background-color: #ff6a46 !important;
            border-color: #ff6a46 !important;
        }

    </style>
</head>
<body>

<div class="nk-container">
    {% include "component/header.html" %}

    {# 页面内容 #}
    <!-- 内容 -->
    <div class="main">
        <div class="container pl-5 pr-5 pt-3 pb-3 mt-3 mb-3">
            <h3 class="text-center text-info border-bottom pb-3">登&nbsp;&nbsp;录</h3>
            <form class="mt-5" method="post" action="/login">
                <div class="form-group row">
                    <label for="username" class="col-sm-2 col-form-label text-right">账号:</label>
                    <div class="col-sm-10">
                        <input type="text"
                               class="{{ "form-control " +('is-invalid' if userMsg['usernameMsg'] else '') }}"
                               id="username" name="username" placeholder="请输入您的账号!" required>
                        <div class="invalid-feedback">{{ userMsg['usernameMsg'] }}</div>
                    </div>
                </div>
                <div class="form-group row mt-4">
                    <label for="password" class="col-sm-2 col-form-label text-right">密码:</label>
                    <div class="col-sm-10">
                        <input type="password"
                               class="{{ "form-control " +('is-invalid' if userMsg['passwordMsg'] else '') }}"
                               id="password" name="password" placeholder="请输入您的密码!" required>
                        <div class="invalid-feedback">{{ userMsg['passwordMsg'] }}</div>
                    </div>
                </div>
                <div class="form-group row mt-4">
                    <label for="code" class="col-sm-2 col-form-label text-right">验证码:</label>
                    <div class="col-sm-6">
                        <input type="text" class="{{ "form-control " +('is-invalid' if userMsg['codeMsg'] else '') }}"
                               id="code" name="code" placeholder="请输入验证码!" required>
                        <div class="invalid-feedback">{{ userMsg['codeMsg'] }}</div>
                    </div>
                    <div class="col-sm-4">
                        <img src="/static/img/captcha.png" id="kaptcha" style="width:100px;height:40px;" class="mr-2"/>
                        <a href="javascript:refresh_kaptcha();" class="font-size-12 align-bottom">刷新验证码</a>
                    </div>
                </div>
                <div class="form-group row mt-4">
                    <div class="col-sm-2"></div>
                    <div class="col-sm-10">
                        <input type="checkbox" id="rememberMe" name="rememberMe">
                        <label class="form-check-label" for="rememberMe">记住我</label>
                        <a href="resetPwd" class="text-danger float-right">忘记密码?</a>
                    </div>
                </div>
                <div class="form-group row mt-4">
                    <div class="col-sm-2"></div>
                    <div class="col-sm-10 text-center">
                        <button type="submit" class="btn btn-info text-white form-control">立即登录</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    {# 页面内容end #}

    {% include "component/footer.html" %}
</div>

{% include "component/static_resource_js.html" %}
<script>
    $(document).ready(function () {
        console.log("Hello world!")
    })
</script>

</body>
</html>